<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>天气预报</title>
	<link rel="shortcut icon" type="image/x-icon" href="./Src/img/yyy_1.ico">
	<link rel="stylesheet" href="./Weather.css">
</head>
<body>
	<section id="weatherApp" v-cloak>
		<h1>霖雨天气</h1>
		<div class="search_1">
			<input v-model="city" type="text" autofocus="autofocus" placeholder="输入城市" @keydown.enter="search_n" maxlength="10"/>
			<button @click="search_n">搜索</button>
		</div>
		<div class="cityShow">
			<label @click="qCity('北京')">北京</label>
			<label v-on:click="qCity('西安')">西安</label>
			<label @click="qCity('成都')">成都</label>
			<label @click="qCity('广元')">广元</label>
		</div>
		<div class="tqToday" v-for="(item,index) in weather_list.slice(0,1)">
			<div class="wLeft">
				<div class="weToday">{{item.type}}</div>
				<div class="wdToday">{{item.high.slice(3)}}~{{item.low.slice(3)}}</div>
				<div class="weTime">
					{{item.date}}
				</div>
			</div>
			<div class="wRight">
				<!-- <img src="Src/img/dy_i.png" > -->
				<img :src="weatherImg[index]" />
			</div>
		</div>
		<div class="tianQi">
			<div class="tq_info" v-for="(item,index) in weather_list.slice(1)">
				<div class="we_info">
					<label>{{item.type}}</label>
					<img :src="weatherImg[index+1]" >
				</div>
				<div class="we_wd">
					<label>{{item.high.slice(3)}}~{{item.low.slice(3)}}</label>
				</div>
				<div class="we_time">
					{{item.date}}
				</div>
			</div>
<!-- 			<div class="tq_info">
				<div class="we_info">
					<label>多云</label>
					<img src="Src/img/dy_i.png" >
				</div>
				<div class="we_wd">
					<label>00°</label>
				</div>
				<div class="we_time">
					2021-07-20
				</div>
			</div>			
			<div class="tq_info">
				<div class="we_info">
					<label>多云</label>
					<img src="Src/img/dy_i.png" >
				</div>
				<div class="we_wd">
					<label>00°</label>
				</div>
				<div class="we_time">
					2021-07-20
				</div>
			</div> -->
		</div>	
	</section>

</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
	<script src="./Weather.js"></script>
</html>